<script setup lang="ts">
import { ref } from 'vue'
import { getSkuListService } from '@/apis/product/sku'
import type { SkuResponseData, SkuData } from '@/apis/product/sku/type'
const dialogVisible = ref(false)

const skuList = ref<SkuData[]>([])
const open = async (spuId: number) => {
  dialogVisible.value = true
  const res: SkuResponseData = await getSkuListService(spuId)
  skuList.value = res.data
}

defineExpose({
  open
})
</script>

<template>
  <el-dialog v-model="dialogVisible" title="SKU列表">
    <el-table :data="skuList" border>
      <el-table-column label="SKU名字" prop="skuName"></el-table-column>
      <el-table-column label="SKU价格" prop="price"></el-table-column>
      <el-table-column label="SKU重量" prop="weight"></el-table-column>
      <el-table-column label="SKU图片">
        <template #default="{ row }">
          <el-image
            :src="row.skuDefaultImg"
            fit="cover"
            style="width: 100px; height: 100px"
          ></el-image>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>
